<template>
	<view class="mainPage">
		<view class="data-list">
			<view class="data-item" @click="jumpDetail(item)" v-for="(item,index) in recordList" :key="index">
				<view class="data-top">
					<view class="data-top-left">
						{{getType(item.bizType)}}{{item.direction=="IN"?"入账":"出账"}}
					</view>
					<view class="data-top-right">
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
				<view class="data-bottom">
					<view class="data-bottom-plate">
						<view class="data-bottom-dd">
							积分：{{item.amount}}
						</view>
						<view class="data-bottom-dd">
							时间：{{item.createTime}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
	
		<u-loadmore :status="status" />
		
		
	</view>
</template>

<script>
	import {
		imgUrl,
		appletImgUrl,
		zpImgUrl
	} from "@/common/config.js"
	export default {
		data() {
			return {
				zpImgUrl: zpImgUrl,
				
				cur: 0,
				show: false,
				mode: "range",
				recordList: [],
				userInfo: {
					activateFee: 0,
					activatedIntegral: 0,
					buyPoints: 0,
					level: 1,
					levelName: "普通会员",
					mhbPoints: 0,
					mhbPrice: 0,
					partnerFee: 0,
					proPoints: 0,
					rewardIntegral: 0,
					userId: "",
					userPhoto: ""
				},
				queryData: {
					pageNo: 1,
					pageSize: 10,
					walletType:""//MONEY消费券，RED_INTEGRAL红积分
				},
				public: {
					startTime: "",
					endTime: ""
				},
				type: "1",
				pageTotal: 1,
				status: "loadmore",
				user_info: {},
				currentTime: "",
				imgUrl: imgUrl,
				appletImgUrl: appletImgUrl,
				backgroundImg: 'url(' + appletImgUrl + 'mihuiBg.png)',
				backgroundPosition: "left top",
				backgroundRepeat: "no-repeat",
				backgroundSize: "100%,auto",
				count: 0,
				couponTotal:0,
				redintegralTotal:0,
				freezeAmount:0,
				

			}
		},
		onLoad(option) {
			this.getTime();
			this.user_info = uni.getStorageSync('userInfo');
			this.queryData.walletType=option.walletType;
		},
		onShow() {
			this.queryData.pageNo = 1;
			this.recordList = [];
			this.getCouponsLogs();
			
		},
		onReachBottom() {
			if (this.count >= 10) {
				this.status = 'loading';
				this.queryData.pageNo++
				this.getCouponsLogs();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			backPage() {
				uni.navigateBack()
			},
			getType(val){
				let text="";
				if(val==1){
					text="申请";
				}
				if(val==2){
					text="转让";
				}
				if(val==3){
					text="消费";
				}
				if(val==4){
					text="提现";
				}
				if(val==9){
					text="消费退款";
				}
				if(val==11){
					text="团队极差";
				}
				if(val==12){
					text="直推奖";
				}
				if(val==13){
					text="全网共享";
				}
				if(val==14){
					text="服务中心奖励";
				}
				return text;
			},
			getTime() {
				let now = new Date();
				let year = now.getFullYear(); // 年
				let month = now.getMonth() + 1; // 月
				let date = now.getDate(); // 日
				var lastDate = new Date(year, month, 0).getDate(); //获取当月最后一日
				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}

				this.public.startTime = year + "-" + month + "-01" + " 00:00:00";
				this.public.endTime = year + "-" + month + "-" + lastDate + " 23:59:59";
				this.currentTime = year + "-" + month + "-01" + "至" + year + "-" + month + "-" + lastDate;


				// this.queryData.startTime = this.public.startTime;
				// this.queryData.endTime = this.public.endTime;

			},
			tabNav(i) {
				// this.type = i + 1;
				this.cur = i;
				this.queryData.pageNo = 1;
				this.recordList = [];
				this.count = 0;
				if(i==0){
					this.queryData.walletType="MONEY";
				}else{
					this.queryData.walletType="RED_INTEGRAL";
				}
				this.getCouponsLogs();
			},
			openData() {
				this.show = true;
			},
			change(e) {
				console.log(e);
				this.public.startTime = e.startDate + ' ' + '00:00:00';
				this.public.endTime = e.endDate + ' ' + '23:59:59';
				// this.queryData.startTime = this.public.startTime;
				// this.queryData.endTime = this.public.endTime;
				this.currentTime = e.startDate + "至" + e.endDate;
				this.queryData.pageNo = 1;
				this.pageTotal = 1;
				this.recordList = [];
				this.count = 0;
				
			},
			getCouponsLogs() {
				let that=this;
				this.$u.post('zpuserwallet/freezelogs',this.queryData).then(res => {
					console.log(res)
					this.recordList = [...res.list, ...this.recordList];
					this.count = res.list.length;
					if (this.count >= 10) {
						this.status = 'loading';
					} else {
						this.status = 'nomore';
					}
				});
			},
			jumpDetail(data){
				let strData=JSON.stringify(data);
				uni.navigateTo({
					url: '/pages/user/myAccount/accountDetail?strData='+strData
				});
			}
		}
	}
</script>

<style lang="scss">
	.mainPage {
		background-color: #F5F5F5;
		height: 100vh;
		padding-top: 20rpx;
	}

	.content {
		.myBalance {
			padding-top: 60rpx;
			padding-bottom: 40rpx;

			.name {
				font-size: 28rpx;
				text-align: center;
			}

			.amount {
				font-size: 72rpx;
				text-align: center;
				font-weight: bold;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.Withdrawal {
				width: 432rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(to right, #FFA858, #E42548);
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				margin-left: 159rpx;
				border-radius: 200rpx;
			}

			.text {
				font-size: 24rpx;
				text-align: center;
				margin-top: 30rpx;
			}
		}

		.plate {
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.plate-li {
				width: 335rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;

				.plate-li-label {
					font-size: 24rpx;
				}

				.plate-li-amount {
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}

	

	}

	.tab-nav {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 60rpx;

		.tab-nav-li {
			padding-left: 10rpx;
			padding-right: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			text-align: center;
			border-radius: 200rpx;
			margin-right: 20rpx;
			color: #C0C0C0;
		}

		.active {

			color: #000;
		}
	}

	.screen-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.screen-time-option {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.screen-time-label {
				margin-left: 10rpx;
			}
		}
	}

	.data-list {
		padding-left: 30rpx;
		padding-right: 30rpx;
         .data-item{
			 background-color: #fff;
			 padding: 20rpx;
			 border-radius: 10rpx;
			 margin-bottom: 20rpx;
			 .data-top{
				 display: flex;
				 flex-direction: row;
				 justify-content: space-between;
				 margin-bottom: 10rpx;
				 .data-top-left{
					 font-size: 32rpx;
				 }
			 }
			 .data-bottom{
				 .data-bottom-plate{
					 display: flex;
					 flex-direction: row;
					 justify-content: space-between;
					 color: #C0C0C0;
					 border-bottom: 1rpx solid #F5F5F5;
					 margin-bottom: 10rpx;
					 padding-bottom: 10rpx;
					 .data-bottom-dd{
						 margin-right: 20rpx;
					 }
				 }
				 .data-bottom-time{
					 color: #C0C0C0;
				 }
			 }
		 }
		
	}





	.outPoint {
		.plate-li-btn {
			width: 80rpx;
			height: 40rpx;
			font-size: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			background: linear-gradient(to right, #FFA858, #E42548);
			color: #fff;
			line-height: 40rpx;
		}
	}

	.nav-box {

		position: fixed;
		width: 750rpx;
		top: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 30rpx;

		.back {
			width: 80rpx;
		}

		.head-title {
			text-align: center;
			width: 530rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;


		}
	}

	.head_plate {
		position: relative;
         .account-head{
			 position: absolute;
			 left: 30rpx;
			 top:200rpx;
			 width: 690rpx;
			 .AccountInfo{
				 position: absolute;
				 top:30rpx;
				 left: 30rpx;
				 width: 630rpx;
				 .AccountInfo-tit{
					 font-size: 28rpx;
					 color: #C0C0C0;
				 }
				 .AccountInfo-money{
					 font-size: 48rpx;
					 color: #fff;
					 font-weight: bold;
					 margin-top: 20rpx;
					 margin-bottom: 20rpx;
				 }
				 .oper-btn{
					 display: flex;
					 flex-direction: row;
					 justify-content: space-between;
					 .oper-btn-apply{
						 width: 100%;
						 height: 80rpx;
						 line-height: 80rpx;
						 background-color: #fff;
						 border-radius: 80rpx;
						 text-align: center;
					 }
					 .oper-btn-out{
						 width: 214rpx;
						 height: 80rpx;
						 line-height: 80rpx;
						 text-align: center;
						 background-color: #FFE33F;
						 border-radius: 80rpx;
					 }
				 }
			 }
		 }
		

		
	}
	.apply-btn{
		width: 690rpx;
		position: fixed;
		left: 30rpx;
		background: linear-gradient(to right,#FFA24D,#FE381B);
		color: #fff;
		bottom: 50rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		text-align: center;
		border-radius: 20rpx;
	}
	.out-plate{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		.main-out-tit{
			font-size: 28rpx;
			color: #C0C0C0;
		}
		.main-out-money{
			font-size: 32rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
		.main-out-btn{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.btn-trans{
				width: 294rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #FFE33F;
				font-size: 32rpx;
				border-radius: 40rpx;
			}
			.btn-Withdrawal{
				width: 294rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				border: 2rpx solid #000;
				border-radius: 40rpx;
			}
		}
		.main-out{
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			.integral-plate{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}
		.foot-out{
			background-color: #FFF1BD;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 20rpx 30rpx;
			.foot-out-left{
				color: #C0C0C0;
			}
			
		}
	}
	.list-plate{
		margin-left: 30rpx;
		margin-right: 30rpx;
		.list-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}
</style>